<script setup>
import { computed } from 'vue'

const props = defineProps({
  modelValue: {
    required: true
  },
  field: {
    type: String,
    required: true
  },
  label: {
    type: String,
    required: true
  },
  rules: {
    type: Array,
    default: () => []
  },
  options: {
    type: Object,
    default: () => ({})
  },
  clearable: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue'])

const data = computed(() => props.options?.data || [])
const valueKey = computed(() => props.options?.valueKey || 'value')
const labelKey = computed(() => props.options?.labelKey || 'label')
const placeholder = computed(() => props.options?.placeholder || '请选择')
</script>

<template>
  <el-form-item :label="label" :rules="rules" :prop="field">
    <el-select
        :model-value="modelValue"
        @update:modelValue="emit('update:modelValue', $event)"
        :placeholder="placeholder"
        :clearable="clearable"
        :disabled="disabled"
    >
      <el-option
          v-for="item in data"
          :key="item[valueKey]"
          :label="item[labelKey]"
          :value="item[valueKey]"
      />
    </el-select>
  </el-form-item>
</template>
